<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>源辰-浏览管理员信息</title>
<link rel="shortcut icon" href="../../images/yc.png" type="image/x-icon" />
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
	<div id="app">
		<div class="mt10">
			<div class="box">
				<div class="box_border">
					<div class="box_center">
						<form id="myform">
							姓名：<input type="text" id="mname" class="input-text lh30"
								size="40" />&nbsp;&nbsp; 手机号码：<input type="tel" id="tel"
								class="input-text lh30" size="40" />&nbsp;&nbsp; <input
								type="button" name="button" class="btn btn82 btn_search"
								onclick="searchMember()" value="查询" />&nbsp;&nbsp;
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="table" class="mt10">
			<div class="box span10 oh">
				<table width="100%" border="0" cellpadding="0" cellspacing="0"
					class="list_table">
					<thead>
						<tr>
							<th width="80">编号</th>
							<th width="100">昵称</th>
							<th width="100">电话号码</th>
							<th width="120">用户头像</th>
							<th width="200">注册时间</th>
							<th width="120">状态</th>
							<th width="120">操作</th>
						</tr>
					</thead>
					<tbody id="member_info" align="center">
						<tr v-for="item in userInfo">
							<td>{{item.uid}}</td>
							<td>{{item.uname}}</td>
							<td>{{ formatPhoneNumber(item.utel) }}</td>
							<td><img :src="item.upic" alt="Group Image"
								:style="{ width: '50px', height: '50px', objectFit: 'cover',  objectPosition: 'center'}" /></td>
							<td>{{item.regdate}}</td>
							<td class="green" v-if="item.ustatus == 1">正常</td>
							<td class="red" v-else="item.ustatus == 0">冻结</td>
							<td><a href='' @click="closeuser(item.uid)">[冻结]</a>&nbsp;&nbsp;<a
								@click="openuser(item.uid)" href='' class="red">[解封]</a></td>
						</tr>
					</tbody>
				</table>
				<div class="page mt10">
					<div class="pagination">
						<ul id="pagination_info">
							<li class="first-child active"><a href="javascript:void()"
								onclick=" ">首页</a></li>
							<li class="active"><a href="javascript:void()" onclick=" ">1</a></li>
							<li><a href="javascript:void()" onclick=" ">2</a></li>
							<li class="last-child"><a href="javascript:void()"
								onclick="">末页</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/qs.js"></script>
	<script type="text/javascript" src="../js/axios.js"></script>
	<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
	let app = new Vue({
		el: '#app',
		data:{
			userInfo:[]
		},
		
		methods:{
			//后台获取用户信息
			getUserInfos(){
				axios.post("../../member/list",{
					
				}).then(resp=>{
					if(resp.code == 500) return alert("失败");
						this.userInfo = resp.data.data;
						console.info(this.userInfo);
				});
			},
			
			   formatPhoneNumber(phoneNumber) {  
			      if (!phoneNumber || typeof phoneNumber !== 'string') return '';  
			      const parts = phoneNumber.split('');  
			      if (parts.length >= 7) {  
			        parts.splice(3, 4, '*', '*', '*', '*');  
			        return parts.join('');  
			      }  
			      return phoneNumber;  
			    },
			
			// 解封
			openuser(uid){
				axios.get("../../member/openuser",{
					params:{
						uid
					}
				}).then(resp=>{
					if(resp.code == 500) return alert("失败");
				})
				this.getUserInfos();
			},
			
			//冻结
			closeuser(uid){
				axios.get("../../member/closeuser",{
					params:{
						uid
					}
				}).then(resp=>{
					if(resp.code == 500) return alert("失败");
				})
				this.getUserInfos();
			}
		},
			
		mounted(){
			this.getUserInfos();
		}
	})
</script>
</body>
</html>